<template>
	<div v-show="coverShow">
		<div class="search-content" ref="editContent">
			<div class="slot-box">
				<slot></slot>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {
				coverShow: false
			}
		},
		mounted() {

		},
		methods: {
			showCover() {
				this.coverShow = true;
				this.$refs.editContent.style.transform = "translateY(30px)"

			},
			hideCover() {
				this.$refs.editContent.style.transform = "translateY(-300px)"
				this.coverShow = false;

			}
		}
	}
</script>

<style>
	.search-content {
		background: #fff;
		/*width: 400px;*/
		/* height: 300px; */
		position: absolute;
		/*left: 0;*/
		right: 0;
		z-index: 1000;
		border-radius: 3px;
		margin: auto;
		/* transform: translateY(30px); */
		transform: translateY(-300px);
		transition: transform 0.3s ease-out;
		box-shadow: 0px 0px 4px #ccc;
	}
	
	.slot-box {
		padding: 20px;
		box-sizing: border-box;
	}
	
	.slot-box input {
		border: 1px solid #ddd;
		padding: 5px 5px;
		/*width: 50%;*/
		height: unset;
	}
</style>